<template>
  <a-modal
    :title="title"
    :visible="show"
    :footer="false"
    @cancel="onClose"
  >
    <json-view
      v-if="json"
      :value="json"
      :copyable="copyOption"
      :boxed="false"
      :sort="true"
    ></json-view>
  </a-modal>
</template>

<script>
import VueJsonViewer from 'vue-json-viewer'

export default {
  name: 'json-view-modal',
  components: {
    'json-view': VueJsonViewer,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: 'json-viewer',
    },
    json: {
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      copyOption: {
        copyText: '复制',
        copiedText: '已复制',
      }
    }
  },
  methods: {
    onClose () {
      this.$emit('close')
    },
  },
}
</script>

<style>

</style>
